<template>
  <div>
    御剑乘风来,除魔天地间!===app
    <hr />
    <input type="text" v-focus="val" />
    <h1 v-ff="valF">是自定义指令ff</h1>
    <hr>
    <ul>
      <li v-for="item in list" :key="item.id">
        <img :src="item.img" alt="" style="width: 200px">
        {{item.title}}
      </li>
    </ul>
    <!-- //这个盒子加 v-loading 是为了遮罩显示隐藏 -->
    <!-- <div v-loading='list.length==0'></div> -->
      <!-- 图片加载失败的场景 v-errorImg:图片加载失败时发生次属性-->
    <img v-errorImg="defaultImg" style="width:200px" src="http://ajax-api.itheima.net/images1/0.webp" alt="">
  </div>
</template>
<script>
import defaultImg from './assets/logo.png'//defaultImg不是响应式不能用,所以要定义到data里面才可以变成响应式数据供页面渲染
import axios from 'axios'
export default {

  name: '',
  data () {
    return {
      val: '我是一个自定义指令 v-focus',
      valF: '我是ff',
      list:[],
      defaultImg

    }
  },
  //局部注册自定义指令:在Vue组件的配置项中
  directives: {
    "ff": {
      inserted (el, binding) {
        // 可以对 el 标签，扩展额外功能  
        // console.log(el, binding.value, 999);
        el.innerText=binding.value
      }
    },
    //页面加载效果时
    loading:{
      // 页面渲染完成执行
      inserted (el, binding) {
        // 可以对 el 标签，扩展额外功能  
        console.log(el, binding.value, 999);
        el.classList.add('active')
        el.innerText="正在加载中....."
      },
      //使用指令的元素更新了数据就会触发
      update(el,binding){
        setTimeout(()=>{el.style.display='none'},3000)
      }
    },
    errorImg:{
      //el是自定时属性绑定的元素,binding.value可以获取自定义属性传递的值
      inserted(el,binding){
        //只有当加载失败错误时,发生的事件:将errorImg自定义属性传递的默认地址赋给图片
        el.onerror=function (){
          el.src=binding.value
        }
      }

    }
  },
  created () {
    this.getNews()
  },
  computed: {
  },
  methods: {
   async getNews(){
      const res=await axios.get('http://hmajax.itheima.net/api/news')
      console.log(11111111111111);
      console.log(res.data.data)
      this.list=res.data.data
      
    }
  }
}
</script>
<style lang='less'  scoped>
 .active{
  width: 100vw;
  height: 100vh;
  background:rgba(158, 156, 156, 0.8);
  z-index:999;
  position: fixed;
  top: 0;
  left:0;
  text-align: center;
  line-height: 100vh;
  color: white;
 }
</style>
